<template>
  <div class="shopCart">
    <nav-bar class="shopCartNavBar"
      ><div slot="center">购物车({{ cartListLen }})</div></nav-bar
    >
    <scroll class="wrapper" ref="scroll">
      <shop-cart-item :cartListData="cartListData"></shop-cart-item
    ></scroll>
    <shop-cart-bottom-bar :cartListData="cartListData"></shop-cart-bottom-bar>
  </div>
</template>

<script>
import NavBar from "../../components/common/NavBar/NavBar.vue";
import { mapGetters } from "vuex";
import ShopCartItem from "./components/ShopCartList.vue";
import Scroll from "../../components/common/BetterScroll/Scroll.vue";
import ShopCartBottomBar from './components/ShopCartBottomBar.vue';
export default {
  components: { NavBar, ShopCartItem, Scroll, ShopCartBottomBar },
  data() {
    return {
      cartListData: [],
    };
  },
  computed: {
    //使用Vuex的mapGetter
    // cartListNum() {
    //   return this.$store.state.cartList.length;
    // },
    ...mapGetters(["cartListLen", "cartList"]),
  },
  //updated内监听事件变动，更新
  updated() {
    this.cartListData = this.cartList;
  },
  activated(){
    this.$refs.scroll.imageRefresh()
  }
};
</script>

<style scoped>
.shopCartNavBar {
  background-color: #ff8e96;
  color: #fff;
  z-index: 99;
}
.wrapper {
  margin-top: 44px;
  height: calc(100% - 44px - 49px - 40px);
  overflow: hidden;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
}
</style>